import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'

const _MOCK_DATA = [
  <button>确认</button>,
  <button>重置</button>,
  <button>取消</button>,
]

const App = () => (
  <>
    <p>1. 设置margin-right:16px;</p>
    <FooterA btnGroup={_MOCK_DATA} />
    <FooterA btnGroup={_MOCK_DATA} align='right' />
    <br />
    <p>2. 设置margin-inline-end:16px;</p>
    <FooterB btnGroup={_MOCK_DATA} />
    <FooterB btnGroup={_MOCK_DATA} align='right' />
  </>
)

const FooterA = ({ btnGroup, align = '' }) => (
  <div className='container'>
    <div className={`footer-right ${align}`}>{btnGroup.map((i) => i)}</div>
  </div>
)

const FooterB = ({ btnGroup, align = '' }) => (
  <div className='container'>
    <div className={`footer-end ${align}`}>{btnGroup.map((i) => i)}</div>
  </div>
)

export default ReactDOM.render(<App />, document.querySelector('#root'))
